<div class="root">
  <div class="top-bar"></div>
  <div class="bottom-box">
    <div class="left-bar">
      <ul>
        <li>
          <!-- 
            routerLink其实就相当于vue中的path，里面指定好路径即可
            routerLinkActive就是当该路由链接处于选中状态时对应你在css中的class
            queryParams则是用来传参，当你点击这个链接，将会给对应的组件传过去参数，可以通过this.router.info.snapshot.queryParams获取到
           -->
          <a
            [routerLink]="['/home']"
            routerLinkActive="active-left-bar"
            [queryParams]="{ name: 'Tina' }"
          >
            home
          </a>
        </li>
        <li>
          <a [routerLink]="['/about']" routerLinkActive="active-left-bar">
            about
          </a>
        </li>
      </ul>
    </div>
    <div class="right-container">
      <!-- 路由组件渲染的位置，其实就是vue中的router-view -->
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
